<template>
  <div class="listTable">
    <!-- {{maxNum}}_1 -->
    <div v-for="(item, index) in title" :key="index" class="li">
      <div v-if="title[0].name != '平均送达时效'">
        <div class="title">{{ item.name }}</div>
        <div class="content">
          <div class="line">
            <!-- //要有动画效果必须还渲染的情况下先负责width:0%,在改变宽度 -->
            <div :style="{ width: ((data ? data[item.value] : 0) / maxNum) * 100 + '%' }">&emsp;</div>
          </div>
          <div class="num textOver">{{ (data ? data[item.value] : 0) ? data[item.value] : 0 }}
            <span>{{ item.name == '庭前送达文书' || item.name == '裁判文书' ? '份' : (item.name == '在线送达(易送达)' || item.name ==
                '在线立案' || item.name == '在线举质证' || item.name == '在线庭审' ? '件' : (item.name == '总人次' || item.name ==
                  '厦门以外地区人数' ? '人' : (item.name == '节约群众时间' ? '分钟' : '次')))
            }}</span>
            <!-- <span>{{item.name=='总人次'||item.name=='厦门以外地区人数'?'人':(item.name=='在线送达(易送达)'||item.name=='在线立案'||item.name=='在线举质证'||item.name=='在线庭审'?'件':'次')}}</span> -->

          </div>
        </div>
      </div>
      <div v-else>
        <div class="title" style="margin-bottom:0px">{{ item.name }}</div>
        <div class="content">
          <div class="line">
            <!-- //要有动画效果必须还渲染的情况下先负责width:0%,在改变宽度 -->
            <div :style="{ width: ((data ? data[item.value] : 0) / maxNum) * 100 + '%' }">&emsp;</div>
          </div>
          <div class="num textOver">
            {{ (data ? data[item.value] : 0) ? data[item.value] : 0 }}<span>{{ item.name == '平均送达时效' ? '天' : '次'
            }}</span></div>
          <!-- <div class="num textOver">{{(data?data[item.value]:0)?data[item.value]:0}}天</div> -->

        </div>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  name: 'HeadView',
  data() {
    return {
      maxNum: 0,
    }
  },
  props: {
    data: Object,
    title: Array
  },
  watch: {
    data(a) {

      let ary = []
      this.title.forEach(e => {
        ary.push(a[e.value])
      });
      // console.log(ary)
      this.maxNum = Math.max(...ary)
    }
  },
  components: {
  },
  created() {
    if (this.data) {


      let ary = []
      this.title.forEach(e => {
        ary.push(this.data[e.value])
      });
      this.maxNum = Math.max(...ary)
    }

  },
  mounted() {
  },
  methods: {
  }
}
</script>
<style scoped>
.listTable {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* gap: 30px; */

}

.li {
  width: 100%;
}

.title {
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
  /* line-height: 26px; */
  margin-bottom: 10px;
}

.content {
  color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.num {
  /* height: 20px; */
  font-size: 20px;
  font-weight: 400;
  color: #00D5E1;
  width: 108px;
  text-align: right;
  margin-left: 24px;
}

.line {
  flex: 1;

  height: 15px;
}

.line>div {
  transition: width 2s;

  background-image: linear-gradient(to right, #0064E1FF, #00D5E1FF);
  width: 0%;
  height: 10px;
}
</style>


<style>
/* .head{
background-image: url('../../assets/head.png');

  background-size: 100% 100%;
     width:100vw;
     height: 78px;
     color:red;
     font-family: Regular;
} */
</style>
